<template>
 <div>
 <home-header></home-header>
 <home-swiper v-bind:imgList='imgList'></home-swiper>
 <home-icon :iconList='iconList'></home-icon>
 <home-recommend :itemList='itemList'></home-recommend>
 <home-weekend :weekList='weekList'></home-weekend>
 </div>
</template>
<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcon from './components/Icon'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import axios from 'axios'
import {mapState} from 'vuex'
export default {
		name: 'Home',
		components: {
				HomeHeader:HomeHeader,
				HomeSwiper:HomeSwiper,
				HomeIcon:HomeIcon,
				HomeRecommend:HomeRecommend,
				HomeWeekend:HomeWeekend
		},
		data:function(){
			return {
				imgList:[],
				itemList:[],
				weekList:[],
				iconList:[],
				lastCity:'',
				city:this.$store.state.city
			}},
		methods:{
		//将父组件的值传递给子组件
		getInfo:function(){
			axios.get('/api/index.json?city='+this.city).then(this.getInfoSucc)
		},
		getInfoSucc:function(res){
				var res=res.data;
				if(res.ret&&res.data){
					var res=res.data;
					this.city=res.city;
					this.imgList=res.imgList;
					this.itemList=res.itemList;
					this.weekList=res.weekList;
					this.iconList=res.iconList;
				}
			}
	},
		//html渲染完就执行
		mounted:function(){
			this.getInfo();
			this.lastCity=this.city;
		},
		//改变缓存里的数据，当使用keep-alives时会多出一个生命周期函数
		activated:function(){
			if(this.lastCity!=this.city){
			this.getInfo()}
		}
}
</script>
<style>
</style>
